<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#up>div{
				cursor: pointer;
			}
			#down{
				border: 1px solid red;
				padding: 10px;
			}
			.active{
				background-color: pink;
				color: #fff;
			}
			
			#down>div{
				display: none;
			}
			
			#down>div.show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="up">
				<div class="active">第一部分(首页)</div>
				<div>第二部分(添加/存入本地)</div>
				<div>第三部分</div>
				<div>第四部分</div>
			</div>
			<div id="down">
				<div class="show">
					欢迎来到2006大世界
				</div>
				<div>
					<div>
						<label>
							用户:<input type="text" id="user" />
						</label>
					</div>
					<button type="button" id="add">添加</button>
				</div>
				<div>
					<h1>这是展示界面</h1>
					<table>
						<thead>
							<tr>
								<th>
									姓名
								</th>
								<th>
									操作
								</th>
							</tr>
						</thead>
						<tbody id="tbody">
							<!-- <tr>
								<td>kky</td>
								<td>
									<button type="button">删除</button>
								</td>
							</tr> -->
						</tbody>
					</table>
				</div>
				<div>
					这是第四个部分,这都是第四部分
				</div>
			</div>
		</div>
		<script>
			/*
			能用css实现不用js
			选择器用的好,代码写的少
			*/
			var arr=[];//用来存储姓名
			;(function(){
					var upDivs=document.querySelectorAll("#up>div");
					var downDivs=document.querySelectorAll("#down>div");
					
					
					console.log("upDivs:",upDivs);
					fgx();
					console.log("downDivs:",downDivs);
					var upDivsArr=[].slice.call(upDivs);
					for(var i=0;i<upDivs.length;i++){
						upDivs[i].onclick=function(){
							//console.log("this:",this);
							//求出被点击项的下标
							
							// for(var a=0;a<upDivs.length;a++){
							// 	if(this==upDivs[a]){
							// 		console.log("你点击了",a,"项");
							// 	}
							// }
							
							
							var n=upDivsArr.indexOf(this);
							console.log("你点击了",n,"项");
							
							//要隐藏所有的down div 
							downDivHide(upDivs,downDivs);
							downDivs[n].classList.add('show');
							
							//给自己点颜色看看(给自己加高亮)
							this.classList.add('active');
							
							if(n==2){
								showPage(arr);
							}
							
						}
					}
					
					var add=document.getElementById("add");
					var user=document.getElementById("user");
					add.onclick=function(){
						var userV=user.value;
						if(userV){
							var obj={
								user:userV,
								id:+new Date()
								//id:new Date().getTime()
							}
							arr.unshift(obj);
							console.log("所有的arr:",arr);
						}else{
							alert("用户名不能为空");
						}
					}
					
			}());
			
			function downDivHide(upDivs,downDivs){
				for(var i=0;i<downDivs.length;i++){
					downDivs[i].classList.remove("show");
					upDivs[i].classList.remove('active');
				}
			}
			
			
			//渲染页面
			function showPage(arr){
				// console.log("我要渲染页面",arr);
				var tbody=document.getElementById("tbody");
				var trs="";
				for(var i=0;i<arr.length;i++){
					trs+=`
						<tr>
							<td>${arr[i].user}</td>
							<td>
								<button type="button" onclick=del(${arr[i].id})>删除</button>
							</td>
						</tr>
					`;
				}
				tbody.innerHTML=trs;
			}
			
			
			function del(id){
				console.log("要删除的id:",id);
				// arr.splice();
				for(var i=0;i<arr.length;i++){
					if(id==arr[i].id){
						arr.splice(i,1);
						break;
					}
				}
				
				showPage(arr);
				
			}
			
			
			
			
			function fgx(str=""){
				console.log(str+"-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=");
			}
		</script>
	</body>
</html>
